<template>
  <div class="pre-code">
    <div
    class="hljs-container"
    ref="codeRef"
    :codetype="language"
    @mouseenter="mouseover"
    @mouseleave="mouseout"
  >
    <n-collapse-transition :show="show">
      <div v-if="showCopy" class="hljs-copy" @click="clickCopy">{{ copy }}</div>
      <highlightjs :language="language" :autodetect="false" :code="code" />
    </n-collapse-transition>
    </div>
    <div @click="getShowCode" class="show-icon">
      <angle-up class="icon" :class="show?'to-up':'to-down'" />
    </div>
  </div>
</template>

<script setup name="PreCode">
import { guid } from '@/utils';
import { onMounted, nextTick, toRefs } from 'vue';
import hljs from 'highlight.js';
import { AngleUp } from '@vicons/fa';

const Prop = defineProps({
  code: {
    type: String,
    default: '',
  },
  language: {
    type: String,
    default: '',
  },
});
const { code, language } = toRefs(Prop);

const codeRef = ref(null);
const copy = ref('复制');
const showCopy = ref(false);
const show = ref(true);

const mouseover = () => {
  showCopy.value = true;
};
const mouseout = () => {
  showCopy.value = false;
};
const clickCopy = () => {
  let codeHljs = codeRef.value.querySelector('ul.hljs-code-ul');
  let textarea = document.createElement('textarea');
  document.body.appendChild(textarea);
  textarea.setAttribute('readonly', 'readonly');
  textarea.value = codeHljs.outerText;
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  copy.value = '复制成功';
  setTimeout(() => {
    copy.value = '复制';
  }, 1500);
};
const getShowCode = () => {
  show.value = !show.value;
  if (show.value) {
    nextTick(()=>{
      initNumber();
    })
  }
};
const initNumber = () => {
  const blocks = codeRef.value.querySelectorAll('pre code');
  const codeHljs = codeRef.value.querySelector('code.hljs');
  const html = codeHljs.innerHTML;
  const size = html.split('\n').length;
  let ul = document.createElement('ul');
  for (let i = 1; i <= size; i++) {
    let li = document.createElement('li');
    li.innerText = i + '';
    ul.appendChild(li);
  }
  ul.classList.add('hljs-code-number');
  
  blocks.forEach((block) => {
    block.innerHTML = ul.outerHTML + `<ul class='hljs-code-ul'>${block.innerHTML}</ul>`;
  });
};
onMounted(() => {
  initNumber();
});
</script>

<style lang="scss" scoped>
.pre-code {
  position: relative;
}
.show-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0;
  top: 0;
  padding-top: 5px;
  .icon {
    color: #eee;
    width: 20px;
    height: 20px;
    transform: rotate(0deg);
    transition: 0.5s all;
  }
}
.to-down {
  transform: rotate(180deg) !important;
}
.to-up {
  transform: rotate(0deg) !important;
}
/* 语法高亮 */
.hljs-container {
  position: relative;
  display: block;
  display: flex;
  width: 100%;
  min-height: 32px;
  padding-top: 20px;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
  background: #21252b;
  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
  color: #eee;
}

/** 3个点 */
.hljs-container::before {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 12px;
  height: 12px;
  overflow: visible;
  font-weight: 700;
  font-size: 14px;
  line-height: 12px;
  white-space: nowrap;
  text-indent: 65px;
  background-color: #fc625d;
  border-radius: 16px;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: attr(codetype);
}

/** 滚动条 */
:deep(.hljs) {
  box-sizing: border-box;
  display: flex;
}

:deep(.hljs::-webkit-scrollbar) {
  width: 12px !important;
  height: 12px !important;
}

:deep(.hljs::-webkit-scrollbar-thumb) {
  height: 30px !important;
  background: #d1d8e6;
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 19px;
  opacity: 0.8;
}

:deep(.hljs::-webkit-scrollbar-thumb:hover) {
  background: #a5b3cf;
  background-clip: content-box;
  border: 2px solid transparent;
}

:deep(.hljs::-webkit-scrollbar-track-piece) {
  width: 30px;
  height: 30px;
  background: #333;
}

::-webkit-scrollbar-button {
  display: none;
}

/** 行数样式 */
// .hljs-code-number {
//   padding: 17px 10px 0;
//   color: #d1d8e6;
//   font-size: 12px;
//   list-style: none;
//   border-right: 1px solid #d1d8e6;
// }

/** 复制样式 */
.hljs-copy {
  position: absolute;
  top: 50px;
  right: 30px;
  padding: 0 10px;
  color: #66a9ff;
  font-size: 10px;
  background-color: #ecf5ff;
  border-radius: 3px;
  cursor: pointer;
}
.n-space {
  background: #eee;
  padding: 15px;
  border-radius: 5px;
  & > :first-child {
    margin-bottom: 0px !important;
  }
}
::v-deep {
  pre {
    width: 100%;
    margin-bottom: 0;
  }
  .hljs-code-number {
    width: 20px;
    display: inline-block;
    list-style: none;
    margin-right: 5px;
    line-height: 25px;
    color: rgb(238 255 255 / 50%);
    text-align: center;
    font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  }
  .hljs-code-ul {
    display: inline-block;
    list-style: none;
    line-height: 25px;
    overflow-x: auto;
    font-family: consolas, Menlo, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  }
}
</style>
